<!DOCTYPE html>
<html class="pixel-ratio-2 retina android android-6 android-6-0">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta name="format-detection" content="telephone=no" />
    <title>首页</title>
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/mui.min.css">
    <link rel="stylesheet" href="assets/font/iconfont.css">
    <link rel="stylesheet" href="assets/mint-ui/style.css">
    <script src="assets/js/vue.min.js"></script>
    <script src="assets/js/mui.min.js"></script>
    <script src="assets/js/common.js"></script>
    <script src="assets/js/Meter.js"></script>
    <script src="assets/js/Bluetooth.js"></script>
    <script src="assets/js/dataBase.js"></script>
    <script src="UpGw/utils.js"></script>
    <script src="UpGw/data.js"></script>
    <script src="UpGw/decimal.js"></script>
    <script src="UpGw/UpGw.js"></script>
</head>
	<body>
		<div id="H5_MUI">
			<template>
				<!-- 弹出层 -->
				<div class="mask" v-show="showMask" v-on:click="hidePop()"></div>
				<div id="popup" class="popup" v-show="popUp" >
					<div class="popup-cal" v-on:click="popCancel()"><i class="iconfont fs15">&#xe667;</i></div>
					<div class="popup-tab">任务执行</div>
					<p style="height: 2px;"></p>
					<div class="popup-content-ms" id="scrolldIV">
						<div class="popup-list" v-show="eventErr !== ''">
							<li class="popup-title">{{eventErr}}</li>
						</div>
						<ul id="getResult"  class="get-res"></ul>
						<div id="btnDiv"></div>
					</div>
					<div class="btn-div" >
						<button type="button" class="mui-btn" style="background-color: #00796B;color: #FFFFFF;" v-on:click="hidePop()"> 取消 </button>
					</div>
				</div>
				<mt-datetime-picker ref="startPicker" type="datetime"  v-model="startDateValue" @confirm="getStartDate" > </mt-datetime-picker>
				<mt-datetime-picker ref="stopPicker" type="datetime"  v-model="stopDateValue" @confirm="getStopDate"> </mt-datetime-picker>
				<!-- 标题栏 -->
				<div class="navigation-bar">
					<div class="navigation-bar-title"  >数据采集</div>
					<div class="navigation-left">
						<div class="navigation-left-title" v-on:click="mui.back()"><li class="iconfont fs16">&#xe644;</li></div>
					</div>
					<div class="navigation-right">
						<div class="navigation-right-title" v-on:click="sendData()">
							<i class="iconfont fs16">&#xe784;</i>
						</div>
					</div>
				</div>
				<!-- 内容 -->
				<div class="content">
					<form class="mui-input-group fs14 ">
						<div class="mui-input-row" v-on:click="openStartPicker()">
							<label style="width: 30%;">开始时间</label>
							<input type="text"  style="font-size: 12px;width:70%;float: left;text-align: left;" class="mui-input-clear"  v-model="startDate"  placeholder="2019-11-10 10:10">
						</div>
						<div class="mui-input-row" v-on:click="openStopPicker()">
							<label style="width: 30%;">结束时间</label>
							<input type="text"  style="font-size: 12px;width:70%;text-align: left;"  class="mui-input-clear" v-model="stopDate"  placeholder="2019-11-10 10:10">
						</div>
					</form>
				</div>
				<!-- 选项卡tab-bar -->
					<div class="tab-bar-no-se"  >
						<div class="tab-bar-active" >表箱</div>
						<div class="tab-bar-cell ">分支箱</div>
						<div class="tab-bar-cell "></div>
					</div>
				<!-- 标题 -->
				<div class="title-row" style="margin-top: 45px;">冻结数据</div>
				<!-- 内容 -->
				<div class="content c-title-m" style="margin-top: 165px;">
					<div class="title-cell" >
						<div class="title-cell-view" style="width: 14%;">通讯地址</div>
						<div class="title-cell-view" style="width: 60%;">数据时标</div>
						<div class="title-cell-view" style="width: 10%;">数值</div>
					</div>
				</div>
			</template>
		</div>
	</body>
</html>
<script>
	// 初始化
 
	// $(document).ready(function() {
	//     document.addEventListener('PHJSReady', function() {
	        
	//     });
	// });
	var vm = new Vue({
		el: '#H5_MUI',
		data: {
			startDate:'',
			stopDate:'',
			startDateValue:'',
			stopDateValue:'',
			collectAddr:'000000000000',
			popUp:false,
			showMask:false,
			keyStr:'',
			eventErr:'',
			bleErr:'',
			interval:'',
			result:'',
			meterList:[],
			timer:'',
			dataCount:'',//列表数据统计
			con:'getResult',//消息容器
			eleLI:'LI',
			eleUL:'UL',
			va:3,//单包数量
			maxVa:800,//最大测量点
		},
		created: function () {
			var now = new Date(); //你已知的时间
			var dt = new DateUtil(now);
			this.startDate = dt.toStr('yyyy-MM-dd HH:')+"00";
			this.stopDate = dt.toStr('yyyy-MM-dd HH:')+"00";
			this.plusReady();
		},
		methods: {
			plusReady:function(){
				var that = this;
				document.addEventListener('plusready', function(){
					that.collectAddr = CommonUtil.getStorage('selCollectAddr');
					//蓝牙模块状态监听
					BLE.getBluetoothState(function(data){if(data == 'suceess') this.bleStateChangeIcon = '\uec4a'; 
						if(data == 'fail') that.bleErr = 'unlink';
					});
					//蓝牙设备链接状态监听
					BLE.BLEConnectionStateChange(function(data){
						if(!data.connected) that.bleErr = 'unlink';
					});
					//创建Box表
					let fieldStr = '("CollectAddr" CHAR(110),"BoxAddr" CHAR(100),"BoxNo" INTEGER,"ParentAddr"  CHAR(100),"CT" INTEGER,"WiringId"  INTEGER)';
					// DB.createTable('BoxLoss',fieldStr,function(data){});
					// //搜索所有的终端下电表
					// that.updateList();
					// that.getDataCout();
				},false);
			},
			sendData:function(){
				this.popUp = true;
				this.showMask = true;
				document.getElementById("getResult").innerHTML="";
				var container = mui("#popup p");
				
				let that = this;
				if(this.bleErr == 'unlink') this.eventErr = "蓝牙未连接......";
				if(CommonUtil.getStorage('mac')  == '') this.eventErr = "蓝牙未连接......";
				var up = new UpGw();
				var buffer1;
				let da = 1;
				if(this.eventErr ==''){
					this.timer = setInterval(function() {
						let para = new TPara(0, 140);
						para.add("数量", that.va, Fmt.Bin2);
						CommonUtil.createElementHTML(that.eleLI,"查询序号"+da+"至"+(da+that.va),that.con);
						for(let xh = da ;xh<da+that.va;xh++){
							console.log('序号'+xh);
							para.add("序号"+xh, xh, Fmt.Bin2);
						}
						var task = new Task(that.collectAddr, UpGw.Afn.GetData2, para);
						buffer1 = up.build(task)
						console.log("build " + Util.bytesToStr(buffer1));
						//sendata
						let buffer =  Util.bytesToStr(buffer1);
						let str = "发送成功::->" + buffer;
						CommonUtil.createElementHTML(that.eleLI,str,that.con);
						
						BLE.sendBuffer(buffer,function(data) {})
						BLE.onBLECharacteristicValueChange(that.va,function(data) {
							let getData = "接收成功::<-" + data;
							CommonUtil.createElementHTML(that.eleLI,getData,that.con);
							
							 
							
						});
						
						let btnDiv = document.getElementById("btnDiv");
						btnDiv.scrollIntoView();
						da = da + that.va;
						Util.progressbar(mui("#popup p"),da,that.maxVa);
						if(da >= that.maxVa) clearInterval(that.timer);
					}, that.va*500);
				}
				
			},
			openStartPicker:function() {
				this.startDateValue = new Date()
			    this.$refs.startPicker.open();
			},
			openStopPicker:function() {
				this.stopDateValue = new Date()
			    this.$refs.stopPicker.open();
			},
			getStartDate:function(){
				console.log(this.startDateValue);
				var dt = new DateUtil(this.startDateValue);
				this.startDate = dt.toStr('yyyy-MM-dd HH:')+"00";
			},
			getStopDate:function(){
				console.log(this.stopDateValue);
				var dt = new DateUtil(this.stopDateValue);
				this.stopDate = dt.toStr('yyyy-MM-dd HH:')+"00";
			},
			hidePop:function(){
				clearInterval(this.interval)
				clearInterval(this.timer);
				this.updateList();
				this.getDataCout();
			},
			popCancel:function(){
				this.showMask = false;
				this.popUp = false;
				clearInterval(this.interval)
				clearInterval(this.timer);
				this.updateList();
				this.getDataCout();
			},
		}
	})
	 
</script>
